<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <script th:src="@{/airent/js/vue.js}"></script>
  <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
  <link rel="stylesheet" th:href="@{/airent/css/user copy.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
</head>
<body>
<!--引入导航栏-->
<div th:replace="~{head/topbar::topBar}"></div>

<div id="app">
  <div class="container">
    <div class="row" style="margin-bottom: 30px;">
      <div class="col">
        <div class="jumbotron233">
          <div class="row" id="welcome">
            <h1 class="display-4">欢迎回来 !</h1>
          </div>

          <div id="picture" >
            <a class="nav-link nav-link-user-img" id="v-pills-profile-tab"  href="javascript:void(0)" role="tab" aria-selected="false">
              <img th:src="${session.user.userImg}"  style="width:200px;height: 200px; border: 10px solid white;" alt="图片加载失败"></a>
          </div>

          <div class="row justify-content-end">
            <div class="col-10">
              <div class="col-md-10 offset-md-1 row">
                <div class="base-message col-md-6" >
                  <input type="hidden" th:value="${session.user.userId}" id="userId" >
                  <ul class="list-group list-group-flush">

                    <li class="list-group-item">用户名 :   <span  th:text="${session.user.userName}"></span></li>
                    <li class="list-group-item">性别 :   <span  th:text="${session.user.userGender}"></span></li>
                  </ul>
                  <div class="accordion" id="accordionExample">
                    <div class="card" style="border: 0px;">
                      <div class="card-header" id="headingOne" style="background-color: white">
                        <h2 class="mb-0">
                          <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="padding: 0px; background-color: white;">
                            点击查看详细信息
                          </button>
                        </h2>
                      </div>
                      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                          <div class="base-message col-md">
                            <ul class="list-group list-group-flush">
                              <li class="list-group-item">真实姓名 :   <span  th:text="${session.user.realName}"></span></li>
                              <li class="list-group-item">电话 :   <span  th:text="${session.user.userTel}"></span></li>
                              <li class="list-group-item">身份证号 :<span  th:text="${session.user.idNumber}"></span></li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div >
                <input class="btn btn-primary btn-lg btn-success" th:onclick="showUser([[${user.userId}]])" type="button" value="编译个人资料">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <ul class="nav" style="box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);">
          <li class="nav-item">
            <a class="nav-link" id="v-pills-attention-tab" data-toggle="pill" href="#v-pills-attention" role="tab" aria-controls="v-pills-attention" aria-selected="false">关注</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-release-tab" data-toggle="pill" href="#v-pills-release" role="tab" aria-controls="v-pills-release" aria-selected="false">发布</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="v-pills-comment-tab" data-toggle="pill" href="#v-pills-comment"
               role="tab" aria-controls="v-pills-comment" aria-selected="false" @click="discuss()">评论</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container" >
    <div class="row">
      <div class="col">
        <div class="tab-content" id="v-pills-tabContent" style="box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding-bottom: 10px; margin-bottom: 30px;">
          <div class="tab-pane fade show active" id="v-pills-attention" role="tabpanel" aria-labelledby="v-pills-attention-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我关注的房源</span>
            </nav>
            <div class="row">

              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" aria-label="输入关键字" aria-describedby="button-addon2" v-model="selectHouseResource">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2" @click="colSearch()">搜索</button>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="btn-group btn-group-sm" role="group" >
                  <button type="button" class="btn btn-secondary">排序</button>
                  <button type="button" class="btn btn-secondary" id="btn-price" @click="selectColByPrice()">价格<span v-text="selectByPriceIcon">↑</span></button>
                  <button type="button" class="btn btn-secondary" id="btn-area" @click="selectColByDate()">日期 <span v-text="selectByDateIcon">↑</span></button>
                </div>
              </div>
            </div>

            <div v-for="h in cols">
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;" @click="showColHouse(h.houseId)">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img :src="'https://airent-1303816068.cos.ap-shanghai.myqcloud.com/'+h.houseDto.imgs[0]" class="card-img" alt="图片加载失败" width="200px" height="150px"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title">房源信息标题</span>&nbsp;&nbsp;<span class="badge badge-secondary" v-text="h.houseDto.houseResource">要啥有啥</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted" v-text="h.houseDto.content">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted" v-text="h.houseDto.houseArea+h.houseDto.villageName">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted" v-text="h.houseDto.houseMeasure">xxm<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted" v-text="h.houseDto.orientation">朝向</small></div>
                              <div class="col-md-3"><small class="text-muted" v-text="h.houseDto.houseType">x厅x室x卫x厨</small></div>
                            </div>
                            <div class="mark-house-price" v-text="h.houseDto.rentPrice">1666元/月</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                        <a href="#" class="card-link"><i class="fa fa-heart-o collect-icon" @click="removeCol(h.houseId)">&nbsp;取消收藏</i></a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="house-page">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" aria-label="Previous" @click="goColPage(-1)">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <!--<li class="page-item"><a class="page-link active" href="javascript:void(0)"
                                           v-text="pageNumDate">1</a></li>-->
                  <li class="page-item"><a class="page-link active" href="javascript:void(0)"  v-text="colPageNum">1</a></li>
                  <!--<li class="page-item active"><a class="page-link" href="#" v-text="colPageNum" >2</a></li>
                  <li class="page-item"><a class="page-link" href="javascript:void(0)" @click="goColPage(1)" v-text="colNextPage" v-if="colPageNum < colPages">3</a></li>-->
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" aria-label="Next" @click="goColPage(1)">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="tab-pane fade" id="v-pills-release" role="tabpanel" aria-labelledby="v-pills-release-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我发布的房源</span>
            </nav>
            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="输入关键字" v-model="content" aria-label="输入关键字" aria-describedby="button-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2" @click="check()">搜索</button>
                  </div>
                </div>
              </div>
              <div class="col-4">
                <div class="btn-group btn-group-sm" role="group" >
                  <button type="button" class="btn btn-secondary" >排序:</button>
                  <button type="button" class="btn btn-secondary" id="btn-price" @click="sortPrice()">价格</button>
                  <button type="button" class="btn btn-secondary" id="btn-area" @click="sortMeasure()">面积</button>
                </div>
              </div>
            </div>
            <div v-for="house in houses">
              <div class="search-result-card">
                <div class="row">
                  <div class="col-md-10">
                    <div class="card result-card animate__animated animate__flipInX" style="width: 100%;">
                      <div class="row no-gutters">
                        <div class="col-md-2">
                          <a href="#"><img :src="'https://airent-1303816068.cos.ap-shanghai.myqcloud.com/'+house.imgs[0].imgAdress" class="card-img" alt="图片加载失败"></a>
                        </div>
                        <div class="col-md-9 offset-md-1">
                          <div class="card-body">
                            <a href="#">
                              <span><span class="card-title" v-text="house.houseResource"></span>&nbsp;&nbsp;<span class="badge badge-secondary">要啥有啥</span>&nbsp;<span class="badge badge-secondary">十全十美</span></span>
                            </a>
                            <p class="card-text"><small class="text-muted" v-text="house.content">房源内容描述...</small></p>
                            <div class="card-text row">
                              <div class="col-md-2"><small class="text-muted" v-text="house.villageName">地区地址</small></div>
                              <div class="col-md-2"><small class="text-muted" >面积：{{house.houseMeasure}}m<sup>2</sup></small></div>
                              <div class="col-md-2"><small class="text-muted" >朝向:{{house.orientation}}</small></div>
                              <div class="col-md-3"><small class="text-muted" v-text="house.houseType">x厅x室x卫x厨</small></div>
                              <div class="col-md-3"><small class="text-muted" >审核状态：{{house.examine}}</small></div>
                            </div>
                            <div class="mark-house-price" >房租：{{house.rentPrice}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect" style="margin-top: 30px;">
                      <small class="text-muted">
                        <button @click="updateHouse(house.houseId)">修改</button>
                        <button @click="delHouse(house.houseId)">删除</button>
                      </small>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div id="house-page">
              <nav aria-label="Page navigation example">

                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" aria-label="Previous" @click="go(1)">
                      <span aria-hidden="true" >首页</span>
                    </a>
                  <li class="page-item">
                    <a class="page-link" v-if="pageNum > 1" href="javascript:void(0)" aria-label="Previous" @click="go(prePage)">
                      <span aria-hidden="true">上一页</span>
                    </a>
                    <a class="page-link" v-else href="javascript:void(0)" aria-label="Previous" >
                      <span aria-hidden="true">上一页</span>
                    </a>
                  </li>

                  <li class="page-item" v-for="page in pages">
                    <a class="page-link" href="javascript:void(0)" aria-label="Next" @click="go(page)">
                      <span aria-hidden="true" >{{page}}</span>
                    </a>
                  </li>

                  <li class="page-item">
                    <a class="page-link" v-if="pageNum < pages" href="javascript:void(0)" aria-label="Next" @click="go(nextPage)">
                      <span aria-hidden="true">下一页</span>
                    </a>
                    <a class="page-link" v-else href="javascript:void(0)" aria-label="Next">
                      <span aria-hidden="true">下一页</span>
                    </a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" aria-label="Next" @click="go(pages)">
                      <span aria-hidden="true" >尾页</span>
                    </a>
                  </li>
                </ul>

              </nav>
            </div>
          </div>
<!--          添加评论功能 Mxr-->
          <div class="tab-pane fade" id="v-pills-comment" role="tabpanel" aria-labelledby="v-pills-comment-tab">
            <nav class="navbar navbar-light bg-light" id="nav-row">
              <span class="navbar-brand mb-0 h1">我的评论</span>
            </nav>
            <div class="row">
              <div class="col-8">
                <div class="input-group mb-3">
                  <input type="text" class="form-control"
                         placeholder="输入关键字" aria-label="输入关键字"
                         aria-describedby="button-addon2"
                         v-model="keyWord
"
                  >
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2" @click="discuss">搜索</button>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <div class="card mb-3 user-card animate__animated animate__flipInX" style="width: 100%;"
                   v-for="d in Mydiscuss">
                <div class="row">
                  <div class="col-md-10 row no-gutters">
                    <div class="col-md-10">
                      <div class="card-body">
                        <h6 class="card-title">评论的帖子标题： <a v-text="d.articleTitle"
                                                           href="/showOneAr.html" @click="getId(d.articleId)"></a></h6>
                        <p class="card-text"><small class="text-muted" >我评论的内容</small></p><br>
                        <p class="card-text reply-text">
                          <small class="text-muted">
                            <a href="/houseCol/houseColList" v-text="'@ '+d.toName">@ 用户名</a>
                            <span v-text="d.reportContent" v-html="'：'+d.content">:评论内容或回复内容</span>
                          </small>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <div class="collect">
                      <small class="text-muted">
                        <a href="#" class="card-link" @click="delDiscuss(d.replyId)">&nbsp;删除评论</a>
                      </small>
                    </div>
                  </div>
                </div>
              </div>

            </div>


            <div id="house-page">
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item" @click="disGo(disInfor.prePage)" v-if="disInfor.pages!=0">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>

                  <li class="page-item" v-for="p in disInfor.pages" @click="disGo(p)">
                    <a class="page-link" v-text="p">1</a>
                  </li>

                  <li class="page-item" @click="disGo(disInfor.nextPage)" v-if="disInfor.pages!=0">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>
<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>

<script>
  let btn_price = $("#btn-price");
  btn_price.click(function () {
    btn_text = btn_price.html();
    if (btn_text == "价格" || btn_text == "价格↓") {
      btn_text = "价格↑"
    } else {
      btn_text = "价格↓"
    }
    btn_price.html(btn_text);
  })

   let btn_area = $("#btn-area");
   btn_area.click(function () {
     btn_text = btn_area.html();
     if (btn_text == "面积" || btn_text == "面积↓") {
       btn_text = "面积↑"
     } else {
       btn_text = "面积↓"
     }
     btn_area.html(btn_text);
   })
 </script>
<script th:inline="javascript">

  var vueApp = new Vue({
    el: "#app",
    data: {
      content:'',
      houses:{},
      pageInfo:{},
      pageNum:1,
      pages:0,
      total:0,
      prePage:0,
      nextPage:0,
      //收藏房源
      colHouses:[],
      col_selectByPrice:-1,
      selectColByPriceIcon:'',
      col_selectByDate:1,
      selectColByDateIcon:'',
      selectHouseResource:'',
      //收藏的页数
      colPageNum: 1,
      colPages: 1,
      colPrePage: 1,
      colNextPage: 1,

      Mydiscuss:{},//查到的评论
      disInfor:{},
      keyWord:'',
      disDate:0
    },
    methods: {

      go:function(num){
        //alert(num);
        var url='/house/publish';
        var param="pageNow="+num;
        $.post(url,param,function (data) {
          vueApp.pageNum = data.pageInfo.pageNum;
          vueApp.pages = data.pageInfo.pages;
          vueApp.total = data.pageInfo.total;
          vueApp.prePage = data.pageInfo.prePage;
          vueApp.nextPage = data.pageInfo.nextPage;
          vueApp.houses=data.pageInfo.list
        })
      },
      updateHouse: function (hid) {
          //alert(hid);
          window.location.href="/updateissuehouse.html";
          window.localStorage.setItem("id",hid);
      },
      delHouse:function (hid) {
        var url="/house/delHouse";
        $.post(url,{
          hid:hid
        },function (data) {
          if(data>0){
            alert("删除成功");
          }
        })
        window.location.reload();
      },
      sortPrice:function () {
        $.post("/house/sortPrice",function (data) {
          vueApp.pageNum = data.pageInfo.pageNum;
          vueApp.pages = data.pageInfo.pages;
          vueApp.total = data.pageInfo.total;
          vueApp.prePage = data.pageInfo.prePage;
          vueApp.nextPage = data.pageInfo.nextPage;
          vueApp.houses=data.pageInfo.list
        })
      },

      sortMeasure:function () {
        $.post("/house/sortMeasure",function (data) {
          vueApp.pageNum = data.pageInfo.pageNum;
          vueApp.pages = data.pageInfo.pages;
          vueApp.total = data.pageInfo.total;
          vueApp.prePage = data.pageInfo.prePage;
          vueApp.nextPage = data.pageInfo.nextPage;
          vueApp.houses=data.pageInfo.list
        })
      },
      check:function(){
        var userId=$("#userId").val()
        $.post("/house/publish",{
          content:vueApp.content,
          userId:userId
        },function (data) {
          vueApp.pageNum = data.pageInfo.pageNum;
          vueApp.pages = data.pageInfo.pages;
          vueApp.total = data.pageInfo.total;
          vueApp.prePage = data.pageInfo.prePage;
          vueApp.nextPage = data.pageInfo.nextPage;
          vueApp.houses=data.pageInfo.list
        })
      },
      addImgs: function () {
        var formData = new FormData();

        var pic = document.getElementById("goodsDetailPic").files;

        for(var j=0;j<pic.length;j++){
          formData.append('goodsPhoto[]',pic[j]);

        }
      },
      //
      showColHouse:function (colHouseId) {
        location.href="/houseUser/detail?houseId="+colHouseId
      },
      goColPage:function (num) {
        this.colPageNum += num
        if(this.colPageNum < 1){
          alert("已是首页!")
          this.colPageNum = 1
        }else if(this.colPageNum > this.colPages){
          alert("已是尾页!")
          this.colPageNum = this.colPages
        }else{
          this.colSearch()
        }
      },
      colSearch:function () {
        var url=/*[[@{/houseCol/houseColList}]]*/
        var _this=this;
        $.post(url,'selectHouseResource='+this.selectHouseResource+'&colSelectByPrice='+this.col_selectByPrice+'&colSelectByDate='+this.col_selectByDate+'&colPageNum=' + this.colPageNum,function (data) {
          _this.colHouses = data.list;
          _this.colPages = data.pages;
          _this.colPrePage = data.prePage;
          _this.colNextPage= data.nextPage;
        },"json");
      },
      removeCol:function (colId) {
          alert(colId)
        var url =/*[[@{/houseCol/removeHouseCol}]]*/;
        var _this=this;
        $.post(url, 'colId=' + colId, function (data) {
          if (data == '1') {
            alert("取消成功")
            _this.colList();
          }
        })
      },
      selectColByPrice:function () {
        this.col_selectByPrice *= -1
        if(this.col_selectByPrice == 1){
          this.selectColByPriceIcon = '↓'
        }else if(this.col_selectByPrice == -1){
          this. selectColByPriceIcon = '↑'
        }
        this.colSearch();
      },
      selectColByDate:function () {
        this.col_selectByDate *= -1
        if(this.col_selectByDate == 1){
          this.selectColByDateIcon = '↓'
        }else if(this.col_selectByDate == -1){
          this.selectColByDateIcon = '↑'
        }
        this.colSearch();
      },
      // 👇评论展示用到的方法，不要删！
      discuss: function () {
        $.get('/article/showOneUserReported',{keyWord:vueApp.keyWord}, function (data) {
          console.log(data)
          vueApp.Mydiscuss = data.list
          vueApp.disInfor = data
        })
      },
      delDiscuss: function (replyId) {
        $.get('/article/delReply', {
          replyId: replyId
        }, function (data) {
          vueApp.disInfor = data
          vueApp.Mydiscuss = data.list
        })
      },
      getId: function (id) {
        window.localStorage.setItem("id", id);
      },
    },


    // 👆评论展示用到的方法，不要删！
    computed:{

    },
    created() {
      var url='/house/publish';
      var userId=$("#userId").val();
      var param="userId="+userId;
      var _this=this;
      $.get(url,param,function (data) {
        //console.log(data);
        vueApp.houses=data.pageInfo.list
        vueApp.pageNum = data.pageInfo.pageNum;
        vueApp.pages = data.pageInfo.pages;
        vueApp.total = data.pageInfo.total;
        vueApp.prePage = data.pageInfo.prePage;
        vueApp.nextPage = data.pageInfo.nextPage;
      });
      _this.colSearch();
    }


  })
</script>

<script th:inline="javascript">
  function showUser(userId) {
    var url = /*[[@{/houseCol/showUser}]]*/
            location.href=url+'?userId='+userId;
  }
</script>

</body>
</html>
